<template>
  <div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-tabs @change="callback">
        <a-tab-pane key="1">
          <span slot="tab">
            <a-badge :count="0" :offset="[15, 0]">代发仓租 </a-badge>
          </span>
          <div
            v-if="!infoFlag && tabKey == '1'"
            id="components-form-demo-advanced-search"
            style="margin-top: 20px"
          >
            <a-row :gutter="24" style="margin-bottom: 15px">
              <a-col :span="6">
                客户编号：
                <a-select
                  show-search
                  option-filter-prop="children"
                  style="width: 60%"
                  :filter-option="filterOption"
                  v-model="searchData.tenantId"
                >
                  <a-select-option
                    :value="item.tenantId"
                    v-for="item in accArray"
                    :key="item.id"
                    :titles="item.title"
                  >
                    {{ item.companyName + "/" + item.tenantId }}
                  </a-select-option>
                </a-select>
              </a-col>
              <a-col :span="6">
                仓库名称：<a-select
                  show-search
                  option-filter-prop="children"
                  style="width: 60%"
                  :filter-option="filterOption"
                  v-model="searchData.warehousingId"
                  allowClear
                >
                  <a-select-option
                    :value="item.warehouseId"
                    v-for="item in warehouse"
                    :key="item.warehouseId"
                  >
                    {{ item.titleName }}
                  </a-select-option>
                </a-select>
              </a-col>
              <a-col :span="6">
                日期选择：<a-range-picker
                  style="width: 60%"
                  @change="changeBillData"
                  v-model="billDate"
                />
              </a-col>
              <a-col :span="6">
                <div>
                  <a-button
                    type="primary"
                    class="searchBtn"
                    @click="searchTableData"
                  >
                    查询
                  </a-button>
                  <a-button
                    style="margin: 0 10px"
                    type="primary"
                    class="searchBtn"
                    @click="resetSearch"
                  >
                    重置
                  </a-button>
                </div>
              </a-col>
            </a-row>
          </div>
          <StorageBillTable
            @openStorageDetail="openStorageDetail"
            v-if="!infoFlag && tabKey == '1'"
            :tableList="issuingTableList"
            :tabKey="tabKey"
          />
          <StorageInfo
            :tabKey="tabKey"
            @closeStorageDetail="closeStorageDetail"
            :tabRowData="tabRowData"
            v-if="infoFlag && tabKey == '1'"
          />
        </a-tab-pane>
        <a-tab-pane key="2">
          <span slot="tab">
            <a-badge :count="0" :offset="[15, 0]">转运仓租 </a-badge>
          </span>
          <div
            v-if="!infoFlag && tabKey == '2'"
            id="components-form-demo-advanced-search"
            style="margin-top: 20px"
          >
            <a-row :gutter="24" style="margin-bottom: 15px">
              <a-col :span="6">
                客户编号：
                <a-select
                  show-search
                  option-filter-prop="children"
                  style="width: 60%"
                  :filter-option="filterOption"
                  v-model="searchData.tenantId"
                >
                  <a-select-option
                    :value="item.tenantId"
                    v-for="item in accArray"
                    :key="item.id"
                    :titles="item.title"
                  >
                    {{ item.companyName + "/" + item.tenantId }}
                  </a-select-option>
                </a-select>
              </a-col>
              <a-col :span="6">
                仓库名称：<a-select
                  show-search
                  option-filter-prop="children"
                  style="width: 60%"
                  :filter-option="filterOption"
                  v-model="searchData.warehousingId"
                  allowClear
                >
                  <a-select-option
                    :value="item.warehouseId"
                    v-for="item in warehouse"
                    :key="item.warehouseId"
                  >
                    {{ item.titleName }}
                  </a-select-option>
                </a-select>
              </a-col>
              <a-col :span="6">
                日期选择：<a-range-picker
                  style="width: 60%"
                  @change="changeBillData"
                  v-model="billDate"
                />
              </a-col>
              <a-col :span="6">
                <div>
                  <a-button
                    type="primary"
                    class="searchBtn"
                    @click="searchTableData"
                  >
                    查询
                  </a-button>
                  <a-button
                    style="margin: 0 10px"
                    type="primary"
                    class="searchBtn"
                    @click="resetSearch"
                  >
                    重置
                  </a-button>
                </div>
              </a-col>
            </a-row>
          </div>
          <StorageBillTable
            @openStorageDetail="openStorageDetail"
            v-if="!infoFlag && tabKey == '2'"
            :tableList="transferBillTbaleList"
            :tabKey="tabKey"
          />
          <StorageInfo
            :tabKey="tabKey"
            @closeStorageDetail="closeStorageDetail"
            :tabRowData="tabRowData"
            v-if="infoFlag && tabKey == '2'"
          />
        </a-tab-pane>
        <a-tab-pane key="3">
          <span slot="tab">
            <a-badge :count="0" :offset="[15, 0]">退件仓租 </a-badge>
          </span>
          <div
            v-if="!infoFlag && tabKey == '3'"
            id="components-form-demo-advanced-search"
            style="margin-top: 20px"
          >
            <a-row :gutter="24" style="margin-bottom: 15px">
              <a-col :span="6">
                客户编号：
                <a-select
                  show-search
                  option-filter-prop="children"
                  style="width: 60%"
                  :filter-option="filterOption"
                  v-model="searchData.tenantId"
                >
                  <a-select-option
                    :value="item.tenantId"
                    v-for="item in accArray"
                    :key="item.id"
                    :titles="item.title"
                  >
                    {{ item.companyName + "/" + item.tenantId }}
                  </a-select-option>
                </a-select>
              </a-col>
              <a-col :span="6">
                仓库名称：<a-select
                  show-search
                  option-filter-prop="children"
                  style="width: 60%"
                  :filter-option="filterOption"
                  v-model="searchData.warehousingId"
                  allowClear
                >
                  <a-select-option
                    :value="item.warehouseId"
                    v-for="item in warehouse"
                    :key="item.warehouseId"
                  >
                    {{ item.titleName }}
                  </a-select-option>
                </a-select>
              </a-col>
              <a-col :span="6">
                日期选择：<a-range-picker
                  style="width: 60%"
                  @change="changeBillData"
                  v-model="billDate"
                />
              </a-col>
              <a-col :span="6">
                <div>
                  <a-button
                    type="primary"
                    class="searchBtn"
                    @click="searchTableData"
                  >
                    查询
                  </a-button>
                  <a-button
                    style="margin: 0 10px"
                    type="primary"
                    class="searchBtn"
                    @click="resetSearch"
                  >
                    重置
                  </a-button>
                </div>
              </a-col>
            </a-row>
          </div>
          <StorageBillTable
            @openStorageDetail="openStorageDetail"
            v-if="!infoFlag && tabKey == '3'"
            :tableList="returnBillTableList"
            :tabKey="tabKey"
          />
          <StorageInfo
            :tabKey="tabKey"
            @closeStorageDetail="closeStorageDetail"
            :tabRowData="tabRowData"
            v-if="infoFlag && tabKey == '3'"
          />
        </a-tab-pane>
      </a-tabs>
    </a-spin>

    <!-- 分页器 -->
    <div v-if="!infoFlag" style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          :current="searchData.current"
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>
  </div>
</template>

<script>
import {
  issuing_selectWhBill,
  transfer_selectTransferBill,
  return_selectWhCostBill,
} from "@/apis/system/FinanceManagement/FinanceManagement";
import StorageBillTable from "@/views/system/FinanceManagement/StorageBill/StorageBillTable.vue";
import StorageInfo from "@/views/system/FinanceManagement/StorageBill/StorageInfo.vue";
import { mapState } from "vuex";
export default {
  components: {
    StorageBillTable,
    StorageInfo,
  },
  created() {
    //获取代发仓租列表
    this.getIssuingTableList();
  },
  mounted() {},
  data() {
    return {
      infoFlag: false,
      tabKey: "1",
      //代发仓租
      issuingTableList: [],
      //转运仓租
      transferBillTbaleList: [],
      //退件仓租
      returnBillTableList: [],
      total: 1,
      spinning: false,
      searchData: {
        current: 1,
        size: 10,
        time: 1,
        tenantId: null,
        warehousingId: null,
        startDate: null,
        endtDate: null,
      },
      billDate: null,
      tabRowData: {},
    };
  },
  methods: {
    //查询表格数据
    searchTableData() {
      if ((this.searchData.startDate ?? "") != "") {
        this.searchData.time = null;
      }
      if (this.tabKey == "1") {
        this.getIssuingTableList();
      } else if (this.tabKey == "2") {
        this.gettransferBillTbaleList();
      } else if (this.tabKey == "3") {
        this.getReturnBillTbaleList();
      }
    },
    //关闭仓租明细
    closeStorageDetail() {
      // if (this.tabKey == "1") {
      //   this.getIssuingTableList();
      // } else if (this.tabKey == "2") {
      //   this.gettransferBillTbaleList();
      // } else if (this.tabKey == "3") {
      //   this.getReturnBillTbaleList();
      // }
      this.infoFlag = false;
    },
    //打开仓租明细
    openStorageDetail(rowData) {
      this.tabRowData = rowData;
      this.infoFlag = true;
    },
    //搜索日期选择
    changeBillData(date, dateString) {
      this.searchData.startDate = dateString[0];
      this.searchData.endtDate = dateString[1];
    },
    //获取代发仓租表格数据
    async getIssuingTableList() {
      this.spinning = true;
      let { code, responseBody } = await issuing_selectWhBill(this.searchData);
      if (code === "200") {
        responseBody.records.forEach((item) => {
          item.key = Math.random();
        });
        this.issuingTableList = responseBody.records;
        this.total = responseBody.total * 1;
        this.spinning = false;
      }
    },
    //获取转运仓租表格数据
    async gettransferBillTbaleList() {
      this.spinning = true;
      let { code, responseBody } = await transfer_selectTransferBill(
        this.searchData
      );
      if (code === "200") {
        responseBody.records.forEach((item) => {
          item.key = Math.random();
        });
        this.transferBillTbaleList = responseBody.records;
        this.total = responseBody.total * 1;
        this.spinning = false;
      }
    },
    //获取退件仓租表格数据
    async getReturnBillTbaleList() {
      this.spinning = true;
      let { code, responseBody } = await return_selectWhCostBill(
        this.searchData
      );
      if (code === "200") {
        responseBody.records.forEach((item) => {
          item.key = Math.random();
        });
        this.returnBillTableList = responseBody.records;
        this.total = responseBody.total * 1;
        this.spinning = false;
      }
    },
    //重置按钮
    resetSearch() {
      this.searchData.tenantId = null;
      this.searchData.warehousingId = null;
      this.searchData.startDate = null;
      this.searchData.endtDate = null;
      this.searchData.time = 1;
      this.billDate = null;
      if (this.tabKey == "1") {
        this.getIssuingTableList();
      } else if (this.tabKey == "2") {
        this.gettransferBillTbaleList();
      } else if (this.tabKey == "3") {
        this.getReturnBillTbaleList();
      }
    },
    callback(key) {
      this.tabKey = key;
      this.infoFlag = false;
      if (key == "1") {
        this.getIssuingTableList();
      } else if (key == "2") {
        this.gettransferBillTbaleList();
      } else if (key == "3") {
        this.getReturnBillTbaleList();
      }
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      if (this.tabKey == "1") {
        this.getIssuingTableList();
      } else if (this.tabKey == "2") {
        this.gettransferBillTbaleList();
      } else if (this.tabKey == "3") {
        this.getReturnBillTbaleList();
      }
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      if (this.tabKey == "1") {
        this.getIssuingTableList();
      } else if (this.tabKey == "2") {
        this.gettransferBillTbaleList();
      } else if (this.tabKey == "3") {
        this.getReturnBillTbaleList();
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
  computed: {
    ...mapState(["warehouse", "accArray"]),
  },
};
</script>

<style lang="less" scoped>
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
</style>